<template>
  <div>
    <div :class="className" />
  </div>
</template>

<script>
  import {
    debounce
  } from '../../Utils/utils'

  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  // 以下的组件按需引入
  // require('echarts/lib/component/tooltip') // tooltip组件
  // require('echarts/lib/component/title') //  title组件
  // require('echarts/lib/component/legend') // legend组件

  export default {
    name: 'lineChart',

    props: {
      className: {
        type: String,
        default: 'chart'
      },
      // width: {
      //   type: String,
      //   default: '30%'
      // },
      // height: {
      //   type: String,
      //   default: '100px'
      // },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      },
      legendName: {
        type: String,
      }
    },
    data() {
      return {
        chart: null,
        sidebarElm: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },

    mounted() {
      this.initChart();

      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }

      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.sidebarElm &&
        this.sidebarElm.addEventListener(
          'transitionend',
          this.sidebarResizeHandler
        )
    },

    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }

      this.sidebarElm &&
        this.sidebarElm.removeEventListener(
          'transitionend',
          this.sidebarResizeHandler
        )

      this.chart.dispose()
      this.chart = null
    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(data) {
        this.chart.setOption({
          xAxis: {
            data: data.dateData,
            boundaryGap: false,
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#232226'
            },
            splitLine: {
              lineStyle: {
                type: 'solid'
              }
            },
            axisPointer: {
              // show: false,
              lineStyle: {
                color: '#593FCA'
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
          },
          axisLabel: {
            formatter: (val) => {
              if (val > 1000000) {
                return parseInt(val / 10000) + 'w'
              } else {
                return val
              }
            }
          },
          grid: {
            left: 0,
            right: 10,
            bottom: 10,
            top: 42,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              lineStyle: {
                color: '#593FCA',
                opacity: '0'
              },
              label: {
                show: false
              }
            }
          },
          yAxis: {
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#232226'
              },
              show: true
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#999'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisPointer: {
              // show: false,
              lineStyle: {
                color: '#F7AA24'
              }
            }
          },
          legend: {
            data: [this.legendName],
            type: 'plain',
            left: 0,
            top: 0,
            z: 200,
            textStyle: {
              color: '#999999'
            }
          },
          series: [{
            name: this.legendName,
            type: 'line',
            smooth: false,
            itemStyle: {
              normal: {
                color: '#F7AA24',
                lineStyle: {
                  color: '#F7AA24',
                  width: 2
                },
                areaStyle: {
                  color: 'transparent'
                }
              }
            },
            data: data.actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        })
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      }
    }
  }

</script>
